<template>
  <view class="meeting-record">
    <uni-collapse @change="onChange">
      <CollapseItem :show-arrow="true" title-border="none" title="10KV顾宜线/檀树溪" index="0" :indexList="indexList">
        <RecordOne :data="detail" />
      </CollapseItem>
      <CollapseItem :show-arrow="false" title-border="none" title="主控室直流屏" index="1" :indexList="indexList">
        <RecordTwo :data="detail" />
      </CollapseItem>
      <CollapseItem :show-arrow="false" title-border="none" title="交接班事宜" index="2" :indexList="indexList">
        <RecordThree :data="detail" />
      </CollapseItem>
    </uni-collapse>
  </view>
</template>

<script>
import RecordOne from './components/RecordOne.vue'
import RecordTwo from './components/RecordTwo.vue'
import RecordThree from './components/RecordThree.vue'
import CollapseItem from '@/pages/work/team-or-group/meeting-record/components/CollapseItem.vue'
import { detail } from '@/api/duty-basic/duty-record'
export default {
  name: 'MeetingRecordMain',
  data() {
    return {
      indexList: ['0', '1', '2'],
      detail: {},
    }
  },
  components: {
    CollapseItem,
    RecordOne,
    RecordTwo,
    RecordThree,
  },
  methods: {
    onChange(e) {
      this.indexList = e
    },
    async getDetail(id) {
      const { data = {} } = await detail(id)
      this.detail = data
    },
  },
  onLoad({ id }) {
    id && this.getDetail(id)
  },
}
</script>

<style lang="scss" scoped>
.meeting-record {
  .tags {
    margin-top: 30rpx;
  }

  padding-bottom: 30rpx;
}

.uni-collapse-item-title {
  background: rgb(245, 245, 245);
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  font-size: 26rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
}
</style>
